<!--  -->
<template>
  <div class="container">
    <van-nav-bar :title="activityname" />
    <div class="vote_banner">
      <img src="../assets/vote_img.jpeg">
    </div>
    <VoteInfo></VoteInfo>
    <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o" v-if="ifmutiple" style="margin-bottom:10px"
      class="noticebox">
      当前已选择<span class="redcolor">{{userchoosecount}}</span>项，最少<span class="redcolor">1</span>项，最多<span
        class="redcolor">{{votemax}}</span>项
    </van-notice-bar>
    <van-checkbox-group v-model="checkedresult">
      <van-grid :column-num="2" :gutter="10">
        <van-grid-item v-for="(item,index) in memberlist" :key="index">
          <div class="memberimg">
            <router-link :to="{ path: '/userinfo' }"> <img :src="require('../assets/' + item.headimg + '.jpg')" />
            </router-link>
            <div class="vote_count">{{item.count}}票</div>
          </div>
          <div class="membername">
            <div class="name">{{item.nickname}}</div>
            <van-button type="primary" class="vote_button" v-if="!ifmutiple">投TA一票</van-button>
            <van-checkbox :name="item.nickname" shape="square" checked-color="#ee0a24" v-if="ifmutiple">选TA
            </van-checkbox>
          </div>
        </van-grid-item>
      </van-grid>
      <van-button type="primary" class="vote_button" v-if="ifmutiple" color="#ee0a24"
        style="width:80%;margin:20px auto;" @click="multiplevote">确认投票
      </van-button>
    </van-checkbox-group>

    <!-- <div class="memberlist">
      <div class="memberitem" v-for="(item,index) in memberlist" :key="index">
        <div class="memberimg">
          <router-link :to="{ path: '/userinfo' }"> <img :src="require('../assets/' + item.headimg + '.jpg')" />
          </router-link>
          <div class="vote_count">{{item.count}}票</div>
        </div>
        <div class="membername">
          <div class="name">{{item.nickname}}</div>
          <van-button type="primary" class="vote_button">投TA一票</van-button>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
  import VoteInfo from "../components/Vote_info.vue"
  export default {
    data() {
      return {
        votemax: 3,
        ifmutiple: true,
        checkedresult: [],
        activityname: "",
        memberlist: [{
            nickname: "张三",
            headimg: "headimg1",
            count: 342
          },
          {
            nickname: "李四",
            headimg: "headimg2",
            count: 3123
          }, {
            nickname: "王五",
            headimg: "headimg3",
            count: 83902
          }, {
            nickname: "赵六",
            headimg: "headimg4",
            count: 2342
          },
          {
            nickname: "张三2",
            headimg: "headimg1",
            count: 342
          },
          {
            nickname: "李四2",
            headimg: "headimg2",
            count: 3123
          }, {
            nickname: "王五2",
            headimg: "headimg3",
            count: 83902
          }
        ]
      };
    },
    created() {
      this.activityname = this.$store.state.title
    },
    components: {
      VoteInfo
    },

    computed: {
      userchoosecount() {
        return this.checkedresult.length
      }
    },


    methods: {
      multiplevote() {
        this.$router.push({
          path: "/multiplevote",
          query: {
            checkedresult: this.checkedresult
          }
        })
      }
    }
  }
</script>
<style scoped lang="less">
  /deep/ .van-grid-item__content {
    padding: 0 !important;
  }

  .container {
    width: 100%;
    background: #f6f8fa;
    padding-bottom: 100px;

    .noticebox {}

    .redcolor {
      color: #ee0a24;
      margin: 0 3px;
      font-weight: bold;
    }

    .vote_banner {
      width: 100%;
      margin: 0 auto;

      img {
        width: 95%;
        box-shadow: 5px 5px 15px rgb(223, 223, 223);
        border-radius: 5px;
        margin-top: 5px;
      }
    }

    .memberimg {
      position: relative;

      img {
        width: 100%;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
      }

      .vote_count {
        position: absolute;
        bottom: 10px;
        left: 10px;
        border-radius: 5px;
        background: black;
        color: white;
        padding: 0 5px;
        font-size: 12px;
      }
    }



    .membername {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 12px;
      width: 100%;
      justify-content: space-between;
      padding: 10px 10px;
      box-sizing: border-box;
      border-radius: 5px;
      padding-top: 5px;

      .name {
        font-weight: bold;
        margin-bottom: 5px;
      }

      .vote_button {
        background-image: linear-gradient(to right, #ffd52e, #fe721f);
        border-width: 0;
        border-radius: 4px;
        font-size: 12px;
        padding: 0 8px;
        height: 25px;
        width: 100%;
      }
    }

    .memberlist {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;

      .memberitem {
        background: white;
        margin: 10px 0;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);


      }
    }
  }
</style>